<template>
  <div>
    <hr />
    <h1>user：{{ userCounter }}</h1>
    <h1>user-getters：{{ doubleUserCounter }}</h1>
    <button @click="increment">+1</button>
    <button @click="incrementActions">user-actions：+1</button>
  </div>
</template>
<script>
// import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
import { createNamespacedHelpers } from "vuex";
//3.1写法
const { mapState, mapGetters, mapMutations, mapActions } =
  createNamespacedHelpers("user");

import { useState, useGetters } from "../hooks";

export default {
  // computed: {
  //   //2.1写法
  //   // ...mapState("user", ["userCounter"]),
  //   // ...mapGetters("user", ["doubleUserCounter"]),

  //   // 3.2写法
  //   ...mapState(["userCounter"]),
  //   ...mapGetters(["doubleUserCounter"]),
  // },
  // mounted() {
  //   let str = "   ";
  //   console.log(str.length);
  // },
  // methods: {
  //   //2.2写法
  //   // ...mapMutations("user", ["increment"]),
  //   // ...mapActions("user", ["incrementActions"]),

  //   //3.3写法
  //   ...mapMutations(["increment"]),
  //   ...mapActions(["incrementActions"]),
  // },

  //compositionAPI
  setup() {
    const states = useState("user", ["userCounter"]);
    const getters = useGetters("user", ["doubleUserCounter"]);
    const mutations = mapMutations(["increment"]);
    const actions = mapActions(["incrementActions"]);
    return {
      ...states,
      ...getters,
      ...mutations,
      ...actions,
    };
  },
};
</script>
<style>
</style>
